<template>
  <div class="loading" v-if="showLoading">
    <div class="loader">
      <div class="loader-outter"></div>
      <div class="loader-inner"></div>
    </div>
    <div class="mask"></div>
  </div>
</template>

<script>
export default {
  props: {
    showLoading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang='scss' scoped>
.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
  }
  .loader {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90rpx;
    height: 90rpx;
    margin-top: -45rpx;
    margin-left: -45rpx;
    z-index: 100000;
    .loader-outter {
      position: absolute;
      border: 4rpx solid #f50057;
      border-left-color: transparent;
      border-bottom: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      animation: loader-1-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41)
        infinite;
    }
    .loader-inner {
      position: absolute;
      border: 4rpx solid #f50057;
      border-radius: 50%;
      width: 40rpx;
      height: 40rpx;
      left: calc(50% - 20rpx);
      top: calc(50% - 20rpx);
      border-right: 0;
      border-top-color: transparent;
      animation: loader-1-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
    }
  }
}
@keyframes loader-1-outter {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loader-1-inner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
</style>
